<template>
  <div>
    <button @click="changeName">改名字</button>
    <button @click="changeAge">改年龄</button>
    <button @click="changePerson">改整体</button>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'

const person = ref({ name: '张三', age: 18 })
//房子没换 换了床
function changeName() {
  person.value.name = '李四'
}
//房子没换 换了沙发
function changeAge() {
  person.value.age = 19
}
//房子换了
function changePerson() {
  person.value = { name: '李四', age: 20 }
}
// 如果是监听ref包裹的值，那么默认deep是false，想监听具体属性的修改需要添加 deep
watch(
  person,
  (newVal, oldVal) => {
    console.log('person 变化', newVal, oldVal)
  },
  { deep: true }
)
</script>

<style lang="scss" scoped></style>
